<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="聊天交友平台是一款在线聊天网站，提供了在线交友、世界聊天、随机聊天、离线信息以及游戏娱乐功能，大家可以在这里找到许多欢乐。">
    <meta name="keywords" content="网站在线聊天，聊天交友平台，不坠青云之志，thenie，随机聊天，在线交友，认识新朋友，小游戏，娱乐，放松，交友，简便，快捷">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>注册-聊天交友平台在线聊 (゜-゜)つロ 嗨皮~-thenie</title>
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <!-- Start css -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/icons.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
    <!-- End css -->
</head>
<body class="vertical-layout">
    <!-- Start Container bar -->
    <div id="containerbar" class="containerbar authenticate-bg">
        <!-- Start Container -->
        <div class="container">
            <div class="auth-box register-box">
                <!-- Start row -->
                <div class="row no-gutters align-items-center justify-content-center">
                    <!-- Start col -->
                    <div class="col-md-6 col-lg-5">
                        <!-- Start Auth Box -->
                        <div class="auth-box-right">
                            <div class="card">
                                <div class="card-body">
                                    <!--注册登陆表单-->
                                    <form name="registerForm" id="registerForm" method="post" onsubmit="return false">
                                        <div class="form-head">
                                            <a href="index.html" class="logo"><img th:src="@{/images/logo.svg}" class="img-fluid" alt="logo"></a>
                                        </div> 
                                        <h4 class="text-primary my-4">注 册 !</h4>
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="username" value="" placeholder="用户名" required>
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="email" value="" placeholder="邮箱" required>
                                        </div>
                                        <div class="form-group">
                                            <input type="password" class="form-control" id="password" value="" placeholder="密码" required>
                                        </div>


                                        <div class="form-group">
                                            <input type="password" class="form-control" id="password2" value="" placeholder="重复密码"  required >
                                        </div>

                                        <div class="input-group">
                                            <input id="code" name="code" type="text" class="form-control" placeholder="验证码" aria-describedby="basic-addon2">
                                            <span class="input-group-addon" id="basic-addon2">
                                                <img id="code_regist" alt="" th:src="@{/register/kaptcha}" style="float: right;cursor:pointer; margin-right: 0px" height="35px" onclick="flushCodeRegister()">
                                            </span>
                                        </div>



                                        <div class="form-row mb-3">
                                            <div class="col-sm-12">
                                            </div>
                                        </div>

                                        <button class="btn btn-success btn-lg btn-block font-18" onclick="register()">注 册</button>
<!--                                      <a href="index.html" class="btn btn-success btn-lg btn-block font-18">注 册</a>-->
                                    </form>
                                    <p class="mb-0 mt-3">已经拥有账户? <a th:href="@{/login}">登 陆</a></p>
                                </div>
                            </div>
                        </div>
                        <!-- End Auth Box -->
                    </div>
                    <!-- End col -->
                </div>
                <!-- End row -->
            </div>
        </div>
        <!-- End Container -->
    </div>
    <!-- End Containerbar -->
    <!-- Start js -->        
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>
    <script th:src="@{/js/detect.js}"></script>
    <script th:src="@{/js/jquery.slimscroll.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <!-- End js -->
    <script>

        var username;
        var password;
        var password2;
        var email;
        var code;
        /*
        注册
         */
        function register() {
            username = $("#username").val().trim();
            password = $("#password").val().trim();
            password2 = $("#password2").val().trim();
            email = $("#email").val().trim();
            code = $("#code").val().trim();

            if (username.length==0 ||password.length==0 || password2.length==0 || email.length==0){
                return;
            }
            // 格式判断
            if(username.length <4){
                layer.msg("用户名格式不正确！(长度不小于4位)",{icon:5})
            }else if (username.length>12){
                layer.msg("用户名格式不正确！(长度不超过12位)",{icon:5})
            }else if (/.*[\u4e00-\u9fa5]+.*$/.test(username)){
                layer.msg("用户名不能包含中文！",{icon:5})
            }else if (password.length <4 ){
                layer.msg("密码格式不正确！（长度不小于4位）",{icon:5})
            }else if (password.length >20){
                layer.msg("密码格式不正确！（长度不超过20位）",{icon:5})
            }else if (password !==password2){
                layer.msg("两次输入的密码不一致！",{icon:5});
            }else if (code==null || code==""){
                layer.msg("请输入验证码！",{icon:5});
            } else if (!vailEmail(email)){
                //已输出错误信息
            }else{
                g_showLoading();
                var pwd = g_goServerPass(password);
                //发送注册请求
                //1.判断邮箱和用户名是否存在
                $.ajax({
                    url: "/register/canRegister",
                    type: "GET",
                    data: {
                        email: email,
                        username: username,
                        password: pwd
                    },
                    success: function (data) {
                        if (data.code == 200){
                            //2.进行注册操作
                            doRegister();
                        }else {
                            layer.msg(data.message,{icon:2});
                        }
                    },
                    error: function () {
                        layer.closeAll();
                    }
                });
            }
        }

        /*
        发送注册请求
        */
        function doRegister() {
            var pwd = g_goServerPass(password);
            $.ajax({
                url: "/register/doRegister",
                type: "POST",
                data: {
                    username: username,
                    password: pwd,
                    email: email,
                    code: code
                },
                success: function (data) {
                    window.location.href="/index";

                    if (data.code == 200){
                        layer.msg("注册成功，正在跳转...",{icon:1});
                    }else{
                        layer.msg(data.message,{icon:2});
                    }
                },
                error: function () {
                    layer.closeAll();
                }
            });
        }

        /*
        验证邮箱格式
         */
        function vailEmail(email) {
            var message = "";
            var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            if (!myreg.test(email)) {
                layer.msg("请输入有效的邮箱地址！",{icon:5});
            } else{//验证通过
                return true;
            }
            return false;
        }
        /*
        刷新验证码
         */
        function flushCodeRegister() {
           let req_uri = $("#code_regist").attr('src');
           $("#code_regist").attr('src',req_uri+"?"+new Date())
        }

    </script>
</body>
</html>